<template>
  <h2>组合式api</h2>
  <ul>
    <li>{{ n }}</li>
    <li>{{ obj.n }}</li>
    <li v-for="(item, index) in arr" :key="item.id">{{ index }}---{{ item.name }}</li>
    <!-- <li v-for="(item, index) in obj.data">{{ index }}--{{ item }}</li> -->
    <li>{{ data.username }}</li>
    <li>{{ data.age }}</li>
    <li>{{ data.email }}</li>
  </ul>

  <button @click="changeValue">修改值</button>
</template>

<script setup>
import { reactive, ref, toRef, toRefs } from "vue";

const arr = ref([
  { id: 1001, name: 'jack', age: 20 },
  { id: 1002, name: 'jack2', age: 30 },
  { id: 1003, name: 'jack3', age: 34 },
])

//登录
let obj = reactive({
  data: {
    username: 'helloalallalaa',
    password: '1223456',
    age: 20,
    email: 'hello@126.com'
  },
  n: 6666
})


//const data = toRef(obj, 'data')
//const num = toRef(obj, 'num')
const { data, n } = toRefs(obj)


//修改值
const changeValue = () => {
  n.value = 567

  //arr.value.push({ id: +new Date(), name: 'abcd', age: 18 })
  //arr.value = []
  //后台成功返回res,list
  // const res = {
  //   username: 'hello111',
  //   password: '12232222456',
  //   age: 45,
  //   email: 'hell333o@126.com'
  // }
  // obj.age = 18
  // obj.username = '张三'
  // obj.data = res;
  // obj.username = res.username
  // obj.password = res.password
  // obj.age = res.age
}


</script>

<style scoped lang="scss"></style>
